<template>
    <div id="d1">
        <!--搜索框-->
        <el-row>
            <el-col :span="12">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="疾病名称">
                        <el-input v-model="disName" placeholder="疾病名称"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" @click="search">查询</el-button>
            </el-col>
          <el-col :span="6">
              <el-button type="primary" @click="dialog = true">添加疾病类型</el-button>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="disId" label="编号" width="100"></el-table-column>
            <el-table-column fixed prop="disName" label="疾病名称" width="150"></el-table-column>
            <el-table-column prop="disType" label="疾病类型" width="100"></el-table-column>
            <el-table-column prop="disOccupation" label="是否职业病" width="100"></el-table-column>
            <el-table-column prop="disGender" label="适于性别" width="100"></el-table-column>
            <el-table-column prop="disDay" label="就医期限" width="100"></el-table-column>
            <el-table-column prop="disRoom" label="就诊科室" width="100"></el-table-column>
            <el-table-column prop="disGrader" label="预警等级" width="100"></el-table-column>
            <el-table-column prop="disOther" label="其他名称" width="150"></el-table-column>
            <el-table-column  fixed="right" label="操作" width="250">
                <template slot-scope="scope">
                    <el-button  type="text" @click="queryDisesse(scope.row.disId)">详情</el-button>
                    <el-button  type="text" @click="updateDisesse(scope.row.disId)"> 修改 </el-button>
                    <el-button  type="text" @click="deleteDisesse(scope.row.disId)"> 删除 </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页控件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <el-dialog title="查看疾病详情" :visible.sync="dialogFormVisible">
        <el-form :model="disease" >
            <div style="width:45%;display:inline-block;text-align:left">
          <el-form label-position="right" label-width="90px">
            <el-form-item label="疾病名称" :label-width="formLabelWidth">
            <el-input v-model="disease.disName" autocomplete="off"></el-input>
          </el-form-item>
            <el-form-item label="疾病类型" :label-width="formLabelWidth">
            <el-input v-model="disease.disType" autocomplete="off"></el-input>
          </el-form-item>
            <el-form-item label="是否职业病" :label-width="formLabelWidth">
            <el-select v-model="disease.disOccupation" placeholder="请选择使用状态">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="适于性别" :label-width="formLabelWidth">
            <el-select v-model="disease.disGender" placeholder="请选择适用性别">
              <el-option label="不限" value="不限"></el-option>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          </el-form>
        </div>
        <div style="width:45%;display:inline-block;text-align:left">
          <el-form label-position="right" label-width="90px">
              <el-form-item label="其他名称" :label-width="formLabelWidth">
              <el-input v-model="disease.disOther"></el-input>
            </el-form-item>
            <el-form-item label="就医期限" :label-width="formLabelWidth">
            <el-select v-model="disease.disDay" placeholder="请选择就医期限">
              <el-option label="立即" value="立即"></el-option>
              <el-option label="一周内" value="一周内"></el-option>
              <el-option label="半月内" value="半月内"></el-option>
              <el-option label="一个月内" value="一个月内"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="预警等级" :label-width="formLabelWidth">
            <el-select v-model="disease.disGrader" placeholder="请选择预警等级">
              <el-option label="一级" value="一级"></el-option>
              <el-option label="二级" value="二级"></el-option>
              <el-option label="三级" value="三级"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="就诊科室" :label-width="formLabelWidth">
            <el-select v-model="disease.disRoom" placeholder="请选择就诊科室">
              <el-option label="内科" value="内科"></el-option>
              <el-option label="外科" value="外科"></el-option>
              <el-option label="妇产科" value="妇产科"></el-option>
              <el-option label="儿科" value="儿科"></el-option>
              <el-option label="心血管内科" value="心血管内科"></el-option>
              <el-option label="消化科" value="消化科"></el-option>
              <el-option label="肾内科" value="肾内科"></el-option>
              <el-option label="血液内科" value="血液内科"></el-option>
              <el-option label="呼吸内科" value="呼吸内科"></el-option>
              <el-option label="内分泌科" value="内分泌科"></el-option>
              <el-option label="风湿免疫科" value="风湿免疫科"></el-option>
              <el-option label="感染科" value="感染科"></el-option>
              <el-option label="神经内科" value="神经内科"></el-option>
              <el-option label="肿瘤内科" value="肿瘤内科"></el-option>
              <el-option label="普外科" value="普外科"></el-option>
              <el-option label="泌尿外科" value="泌尿外科"></el-option>
              <el-option label="甲乳外科" value="甲乳外科"></el-option>
              <el-option label="肛肠外科" value="肛肠外科"></el-option>
              <el-option label="神经外科" value="神经外科"></el-option>
              <el-option label="心胸外科" value="心胸外科"></el-option>
              <el-option label="血管外科" value="血管外科"></el-option>
              <el-option label="肝胆外科" value="肝胆外科"></el-option>
              <el-option label="理疗科" value="理疗科"></el-option>
              <el-option label="骨科" value="骨科"></el-option>
              <el-option label="烧伤整形科" value="烧伤整形科"></el-option>
              <el-option label="耳鼻喉科" value="耳鼻喉科"></el-option>
              <el-option label="眼科" value="眼科"></el-option>
              <el-option label="口腔科" value="口腔科"></el-option>
              <el-option label="精神科" value="精神科"></el-option>
              <el-option label="皮肤科" value="皮肤科"></el-option>
              <el-option label="中医科" value="中医科"></el-option>
              <el-option label="儿科" value="儿科"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          </el-form>
        </div>
        <div style="width:80%;display:inline-block;text-align:left">
          <el-form label-width="90px">
            <el-form-item label="医学解释" style="margin-top:29px">
              <el-input type="textarea" v-model="disease.disExplain"></el-input>
            </el-form-item>
            <el-form-item label="常见原因" style="margin-top:29px">
              <el-input type="textarea" v-model="disease.disCause"></el-input>
            </el-form-item>
            <el-form-item label="建议" style="margin-top:29px">
              <el-input type="textarea" v-model="disease.disPropose"></el-input>
            </el-form-item>
          </el-form>
        </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
        <el-dialog title="添加疾病类型" :visible.sync="dialog">
            <div style="width:45%;display:inline-block;text-align:left">
          <el-form :model="diseases" label-position="right" label-width="90px" :rules="rules" ref="fromRules">
            <el-form-item label="疾病名称" :label-width="formLabelWidth" prop="disName" class="common">
              <el-input v-model="diseases.disName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="疾病类型" :label-width="formLabelWidth" prop="disType" class="common">
              <el-input v-model="diseases.disType" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否职业病" :label-width="formLabelWidth" prop="disOccupation" class="common">
            <el-select v-model="diseases.disOccupation" placeholder="请选择使用状态">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="适于性别" :label-width="formLabelWidth" prop="disGender" class="common">
            <el-select v-model="diseases.disGender" placeholder="请选择适用性别">
              <el-option label="不限" value="不限"></el-option>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          </el-form>
        </div>
        <div style="width:45%;display:inline-block;text-align:left">
          <el-form :model="diseases" label-position="right" label-width="90px" :rules="rules" ref="fromRule">
              <el-form-item label="其他名称" :label-width="formLabelWidth" prop="disOther" class="common">
              <el-input v-model="diseases.disOther"></el-input>
            </el-form-item>
            <el-form-item label="就医期限" :label-width="formLabelWidth" prop="disDay" class="common">
            <el-select v-model="diseases.disDay" placeholder="请选择就医期限">
              <el-option label="立即" value="立即"></el-option>
              <el-option label="一周内" value="一周内"></el-option>
              <el-option label="半月内" value="半月内"></el-option>
              <el-option label="一个月内" value="一个月内"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="预警等级" :label-width="formLabelWidth" prop="disGrader" class="common">
            <el-select v-model="diseases.disGrader" placeholder="请选择预警等级">
              <el-option label="一级" value="一级"></el-option>
              <el-option label="二级" value="二级"></el-option>
              <el-option label="三级" value="三级"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="就诊科室" :label-width="formLabelWidth" prop="disRoom" class="common">
            <el-select v-model="diseases.disRoom" placeholder="请选择就诊科室">
              <el-option label="内科" value="内科"></el-option>
              <el-option label="外科" value="外科"></el-option>
              <el-option label="妇产科" value="妇产科"></el-option>
              <el-option label="儿科" value="儿科"></el-option>
              <el-option label="心血管内科" value="心血管内科"></el-option>
              <el-option label="消化科" value="消化科"></el-option>
              <el-option label="肾内科" value="肾内科"></el-option>
              <el-option label="血液内科" value="血液内科"></el-option>
              <el-option label="呼吸内科" value="呼吸内科"></el-option>
              <el-option label="内分泌科" value="内分泌科"></el-option>
              <el-option label="风湿免疫科" value="风湿免疫科"></el-option>
              <el-option label="感染科" value="感染科"></el-option>
              <el-option label="神经内科" value="神经内科"></el-option>
              <el-option label="肿瘤内科" value="肿瘤内科"></el-option>
              <el-option label="普外科" value="普外科"></el-option>
              <el-option label="泌尿外科" value="泌尿外科"></el-option>
              <el-option label="甲乳外科" value="甲乳外科"></el-option>
              <el-option label="肛肠外科" value="肛肠外科"></el-option>
              <el-option label="神经外科" value="神经外科"></el-option>
              <el-option label="心胸外科" value="心胸外科"></el-option>
              <el-option label="血管外科" value="血管外科"></el-option>
              <el-option label="肝胆外科" value="肝胆外科"></el-option>
              <el-option label="理疗科" value="理疗科"></el-option>
              <el-option label="骨科" value="骨科"></el-option>
              <el-option label="烧伤整形科" value="烧伤整形科"></el-option>
              <el-option label="耳鼻喉科" value="耳鼻喉科"></el-option>
              <el-option label="眼科" value="眼科"></el-option>
              <el-option label="口腔科" value="口腔科"></el-option>
              <el-option label="精神科" value="精神科"></el-option>
              <el-option label="皮肤科" value="皮肤科"></el-option>
              <el-option label="中医科" value="中医科"></el-option>
              <el-option label="儿科" value="儿科"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          </el-form>
        </div>
        <div style="width:80%;display:inline-block;text-align:left">
          <el-form :model="diseases" label-width="90px" :rules="rules" ref="fromRul">
            <el-form-item label="医学解释" style="margin-top:29px" prop="disExplain" class="common">
              <el-input type="textarea" v-model="diseases.disExplain"></el-input>
            </el-form-item>
            <el-form-item label="常见原因" style="margin-top:29px" prop="disCause" class="common">
              <el-input type="textarea" v-model="diseases.disCause"></el-input>
            </el-form-item>
            <el-form-item label="建议" style="margin-top:29px" prop="disPropose" class="common">
              <el-input type="textarea" v-model="diseases.disPropose"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button @click="insertDisease()">确 定</el-button>
        </div>
      </el-dialog>
        <el-dialog title="修改疾病类型" :visible.sync="dialogVisible">
            <div style="width:45%;display:inline-block;text-align:left">
          <el-form :model="dis" label-position="right" label-width="90px" :rules="rules" ref="fromRu">
            <el-form-item label="疾病名称" :label-width="formLabelWidth" prop="disName" class="common">
              <el-input v-model="dis.disName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="疾病类型" :label-width="formLabelWidth" prop="disType" class="common">
              <el-input v-model="dis.disType" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否职业病" :label-width="formLabelWidth" prop="disOccupation" class="common">
            <el-select v-model="dis.disOccupation" placeholder="请选择使用状态">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="适于性别" :label-width="formLabelWidth" prop="disGender" class="common">
            <el-select v-model="dis.disGender" placeholder="请选择适用性别">
              <el-option label="不限" value="不限"></el-option>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          </el-form>
        </div>
        <div style="width:45%;display:inline-block;text-align:left">
          <el-form :model="dis" label-position="right" label-width="90px" :rules="rules" ref="fromR">
              <el-form-item label="其他名称" :label-width="formLabelWidth" prop="disOther" class="common">
              <el-input v-model="dis.disOther"></el-input>
            </el-form-item>
            <el-form-item label="就医期限" :label-width="formLabelWidth" prop="disDay" class="common">
            <el-select v-model="dis.disDay" placeholder="请选择就医期限">
              <el-option label="立即" value="立即"></el-option>
              <el-option label="一周内" value="一周内"></el-option>
              <el-option label="半月内" value="半月内"></el-option>
              <el-option label="一个月内" value="一个月内"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="预警等级" :label-width="formLabelWidth" prop="disGrader" class="common">
            <el-select v-model="dis.disGrader" placeholder="请选择预警等级">
              <el-option label="一级" value="一级"></el-option>
              <el-option label="二级" value="二级"></el-option>
              <el-option label="三级" value="三级"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="就诊科室" :label-width="formLabelWidth" prop="disRoom" class="common">
            <el-select v-model="dis.disRoom" placeholder="请选择就诊科室">
              <el-option label="内科" value="内科"></el-option>
              <el-option label="外科" value="外科"></el-option>
              <el-option label="妇产科" value="妇产科"></el-option>
              <el-option label="儿科" value="儿科"></el-option>
              <el-option label="心血管内科" value="心血管内科"></el-option>
              <el-option label="消化科" value="消化科"></el-option>
              <el-option label="肾内科" value="肾内科"></el-option>
              <el-option label="血液内科" value="血液内科"></el-option>
              <el-option label="呼吸内科" value="呼吸内科"></el-option>
              <el-option label="内分泌科" value="内分泌科"></el-option>
              <el-option label="风湿免疫科" value="风湿免疫科"></el-option>
              <el-option label="感染科" value="感染科"></el-option>
              <el-option label="神经内科" value="神经内科"></el-option>
              <el-option label="肿瘤内科" value="肿瘤内科"></el-option>
              <el-option label="普外科" value="普外科"></el-option>
              <el-option label="泌尿外科" value="泌尿外科"></el-option>
              <el-option label="甲乳外科" value="甲乳外科"></el-option>
              <el-option label="肛肠外科" value="肛肠外科"></el-option>
              <el-option label="神经外科" value="神经外科"></el-option>
              <el-option label="心胸外科" value="心胸外科"></el-option>
              <el-option label="血管外科" value="血管外科"></el-option>
              <el-option label="肝胆外科" value="肝胆外科"></el-option>
              <el-option label="理疗科" value="理疗科"></el-option>
              <el-option label="骨科" value="骨科"></el-option>
              <el-option label="烧伤整形科" value="烧伤整形科"></el-option>
              <el-option label="耳鼻喉科" value="耳鼻喉科"></el-option>
              <el-option label="眼科" value="眼科"></el-option>
              <el-option label="口腔科" value="口腔科"></el-option>
              <el-option label="精神科" value="精神科"></el-option>
              <el-option label="皮肤科" value="皮肤科"></el-option>
              <el-option label="中医科" value="中医科"></el-option>
              <el-option label="儿科" value="儿科"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          </el-form>
        </div>
        <div style="width:80%;display:inline-block;text-align:left">
          <el-form :model="dis" label-width="90px" :rules="rules" ref="frome">
            <el-form-item label="医学解释" style="margin-top:29px" prop="disExplain" class="common">
              <el-input type="textarea" v-model="dis.disExplain"></el-input>
            </el-form-item>
            <el-form-item label="常见原因" style="margin-top:29px" prop="disCause" class="common">
              <el-input type="textarea" v-model="dis.disCause"></el-input>
            </el-form-item>
            <el-form-item label="建议" style="margin-top:29px" prop="disPropose" class="common">
              <el-input type="textarea" v-model="dis.disPropose"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click="upDisease()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'disease',
  data () {
    return {
      dialog: false,
      dialogFormVisible: false,
      dialogVisible: false,
      tableData: [],
      currentPage: 1, // 当前页
      pageSize: 5,
      total: 0,
      disName: '',
      formLabelWidth: '120px',
      disease: {},
      diseases: {},
      dis: {},
      rules: {
        disName: [
          { required: true, message: '请输入疾病名称', trigger: 'blur' }
        ],
        disType: [
          { required: true, message: '请输入疾病类型', trigger: 'blur' }
        ],
        disOccupation: [
          { required: true, message: '请选择是否是职业病', trigger: 'change' }
        ],
        disGender: [
          { required: true, message: '请选择适用性别', trigger: 'change' }
        ],
        disOther: [
          { required: true, message: '请输入其他名字', trigger: 'blur' }
        ],
        disDay: [
          { required: true, message: '请选择就医期限', trigger: 'change' }
        ],
        disGrader: [
          { required: true, message: '请选择预警等级', trigger: 'change' }
        ],
        disRoom: [
          { required: true, message: '请选择就医科室', trigger: 'change' }
        ],
        disExplain: [
          { required: true, message: '请输入医学解释', trigger: 'blur' }
        ],
        disCause: [
          { required: true, message: '请输入常见原因', trigger: 'blur' }
        ],
        disPropose: [
          { required: true, message: '请输入建议', trigger: 'blur' }
        ]}
    }
  },
  methods: {
    initBookData () {
      this.$axios.get(`/api/LljDiseaseServlet?pageNum=${this.currentPage}&pageSize=${this.pageSize}&disName=${this.disName}`).then(result => {
        this.tableData = result.data.rows
        this.total = result.data.total
      })
    },
    handleSizeChange (value) { // value是在页大小下拉框选择的值
      this.pageSize = value
      this.initBookData()
    },
    handleCurrentChange (value) { // value是当前页码
      this.currentPage = value
      this.initBookData()
    },
    search () {
      this.currentPage = 1
      this.initBookData()
    },
    deleteDisesse (disId) {
      this.$confirm('此操作将删除该疾病, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`/api/LljDiseaseServlet/${disId}`).then(result => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.initBookData()
        })
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    queryDisesse (disId) {
      this.dialogFormVisible = true
      this.$axios.get(`/api/LljDiseaseServlet/${disId}`).then(result => {
        this.disease = result.data
        this.initBookData()
      })
    },
    insertDisease () {
      let flag1 = false
      let flag2 = false
      let flag3 = false
      this.$refs['fromRules'].validate((valid) => {
        if (valid) {
          flag1 = true
        } else {
          flag1 = false
        }
      })
      this.$refs['fromRule'].validate((valid) => {
        if (valid) {
          flag2 = true
        } else {
          flag2 = false
        }
      })
      this.$refs['fromRul'].validate((valid) => {
        if (valid) {
          flag3 = true
        } else {
          flag3 = false
        }
      })
      if (flag1 === true && flag2 === true && flag3 === true) {
        this.$confirm('此操作将添加该疾病, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(`/api/LljDiseaseServlet`, this.diseases).then(result => {
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
            this.diseases = {}
            this.dialog = false
            this.initBookData()
          })
        }).catch(() => {
          this.$message('已取消添加')
        })
      }
    },
    updateDisesse (disId) {
      this.dialogVisible = true
      this.$axios.get(`/api/LljDiseaseServlet/${disId}`).then(result => {
        this.dis = result.data
        this.initBookData()
      })
    },
    upDisease () {
      let flag1 = false
      let flag2 = false
      let flag3 = false
      this.$refs['fromRu'].validate((valid) => {
        if (valid) {
          flag1 = true
        } else {
          flag1 = false
        }
      })
      this.$refs['fromR'].validate((valid) => {
        if (valid) {
          flag2 = true
        } else {
          flag2 = false
        }
      })
      this.$refs['frome'].validate((valid) => {
        if (valid) {
          flag3 = true
        } else {
          flag3 = false
        }
      })
      if (flag1 === true && flag2 === true && flag3 === true) {
        this.$confirm('此操作将修改该疾病, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.put(`/api/LljDiseaseServlet`, this.dis).then(result => {
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.dialogVisible = false
            this.initBookData()
          })
        }).catch(() => {
          this.$message('已取消修改')
        })
      }
    }
  },
  created () {
    this.initBookData()
  }
}
</script>

<style>
.common{
  margin-top: 23px;
}
</style>
